<template>
  <div class="contentWeb clear">
    <div class="member_menu">
      <Memleft active="memBaoming"/>
    </div>
    <div class="member_right">
      <div class="none_mem" v-if="count * 1 === 0">
        <div style="padding-bottom: 70px;" class="clear">
          <img :src="nonoe" class="noneimg">
          <div>
            还没有报名任何招聘会
          </div>
          <div class="btns" @click="add()">去招聘会看看</div>
        </div>
      </div>
      <div v-if="count *1 > 0">
        <div class="listcount">共报名过<span>{{count}}场</span>招聘会</div>
        <div class="joincontent clear" v-for="(item,index) in ListList" :key="index" >
          <div class="sutatusimg"
            :class="{ will: item.joinStatus*1  === 2, doing: item.joinStatus == 3, end: item.joinStatus == 4}"></div>
          <div class="joinLeft">
            <img :src="item.banner">
          </div>
          <div class="joinRight">
            <div class="titlte" @click="toInfo(item.jfId)" style="overflow: hidden;
     white-space: nowrap;
    text-overflow: ellipsis;
    max-width: 681px;">{{item.title}}</div>
            <div class="deac"><span>举办城市</span><span class="nr">{{item.city}}</span></div>
            <div class="deac"><span>详细地址</span><span class="nr">{{item.address}}</span></div>
            <div class="deac"><span>咨询电话</span><span class="nr">{{item.telno}} {{item.telno2}}</span></div>
            <div class="deac"><span>举办时间</span><span class="nr">{{item.starttime}} - {{item.endtime}}</span></div>
          </div>
          <div class="btnstu" style="bottom: 40px">
            <button type="button" class="cancelbm" @click="canceljoin(item)">取消报名</button>
          </div>
        </div>
        <div style="text-align: center">
          <el-pagination background layout="prev, pager, next"
            @current-change="getpost"
            :page-size="search.pageSize"
            :current-page="search.pageNum"
            :total="count"></el-pagination>
        </div>
      </div>
    </div>
  </div>
</template>
<script type="text/babel">
// @ is an alias to /src
import Memleft from '../../components/memleft'
import mt from '../../assets/img/mt.png'
import { AllJfPersonalByPage, personalJoinJopFair, updateJoinState } from '../../assets/js/domains'
import nonoe from '../../assets/img/weijian.png'
export default {
  name: 'MemBaoming',
  components: { Memleft },
  directives: {},
  data: function () {
    return {
      count: 0,
      nonoe: nonoe,
      search: {
        pageNum: 1, pageSize: 10, user_uid: ''
      },
      ListList: []
    }
  },
  created: function () {
    document.documentElement.scrollTop = document.body.scrollTop = 0
    this.search.user_uid = localStorage.getItem('md_user_uid')
  },
  computed: {},
  mounted: function () {
    this.getpost()
  },
  methods: {
    canceljoin: function (item) {
      var _this = this
      updateJoinState({ jfId: item.jfId, userUid: this.search.user_uid, joinStatus: 4, enterpriseUid: '' }).then(function (res) {
        if (res.code === 200) {
          _this.$message({
            message: '取消报名成功',
            type: 'success'
          })
          window.location.reload()
        } else {
          _this.$message.error('取消报名失败')
        }
      })
    },
    add: function () {
      window.location.href = 'join.html'
    },
    getpost: function (page) {
      const _this = this
      page && (this.search.pageNum = page)
      AllJfPersonalByPage(this.search).then(function (res) {
        if (res.code === 200) {
          _this.ListList = res.data.content
          _this.count = res.data.totalElements
        }
      })
    },
    toInfo: function (id) {
      window.location.href = 'joinDetail.html?id=' + id + '&joinStatus=2'
    }
  }
}
</script>
<style lang="less" scoped>
  @import "../../assets/css/member";
</style>
